/* 此处完成购物车逻辑代码
1. 先把list里面的数据渲染出来
2. 能够全选反选同时总价 总购买数量变化
3. 单个商品数量能够加减 但是有限制 加减的时候小记价格，总价要变化，总购买数量也要变化
4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
6. 能够清空购物车，总数量和总价要对应变化 */

/* 数据渲染 */

// top
let con = document.querySelector(".content");
con.innerHTML += `
<div class="top">
  <input type="checkbox"> 全选
</div>
`;

// center
let ulEl = document.createElement("ul");
ulEl.classList.add("center");
let listItems = list.map((item, index) => {
  return `
  <li data-id=${item.id}>
     <div class="select">
         <input type="checkbox" ${item.select ? "checked" : ""}>
       </div>
       <div class="pic">
         <img src="${item.pic}" alt="">
       </div>
       <div class="name">
         ${item.name}
       </div>
       <div class="price">
         ￥ <span> ${(item.price - 0).toFixed(2)}</span>
       </div>
       <div class="number">
         <button class="reduce">-</button>
         <input type="text" value="${item.number}">
         <button class="add">+</button>
       </div>
       <div class="subtotal">
         ￥ <span>100.00</span>
       </div>
       <div class="del">
         <button>删除</button>
       </div>
     </li>
  `;
});
ulEl.innerHTML = listItems.join("");
con.append(ulEl);

// bottom
con.innerHTML += `
<div class="bottom">
  <p>总购买数量: <span class="totalQuantity">0</span></p>
  <p>
    <button class="pay">去结算</button>
    <button class="clear">清空购物车</button>
    <button class="clear_select">删除所有已选中</button>
    <button class="list">返回列表页</button>
  </p>
  <p>总价格 : ￥ <span class="totalPrice">0.00</span></p>
</div>
`;
// 获取ul
let ulCenter = document.querySelector("ul.center");
// 获取所有的商品
let allGood = document.querySelectorAll(".center>li");

// 获取所有的商品复选框
let allCheckbox = document.querySelectorAll("ul>li .select input");

// 获取全选的复选框
let selectAll = document.querySelector(".top input");

// 获取商品数量的输入框
let numberIpts = document.querySelectorAll(".number input");

// 获取总数量
let totalQuantity = document.querySelector(".bottom .totalQuantity");

// 获取总价格
let totalPrice = document.querySelector(".bottom .totalPrice");

//获取所有的+按钮
let addBtn = document.querySelectorAll(".number .add");

// 获取所有的-按钮
let reduceBtn = document.querySelectorAll(".number .reduce");

// 获取单个商品的删除按钮
let delBtns = document.querySelectorAll(".del button");

// 获取清空购物车按钮
let claerBtn = document.querySelector(".bottom p .clear");

// 获取单个商品数量的总价格
let goodPrice = document.querySelectorAll(".subtotal span");

// 获取删除所有已选中按钮
let delSelectBtn = document.querySelector(".bottom .clear_select");

// 存放每个商品的数量
let quantityArr = [];

/**
 * 计算全部商品的总价格
 */
function countPrice() {
  // 将计算好的总价格渲染到页面上
  totalPrice.textContent =
    list
      .filter((item) => item.select)
      .reduce((prev, item) => {
        return prev + item.number * parseInt(item.price) - 0;
      }, 0) + ".00";
}

/**
 * 计算全部商品的总数量
 */
function countQuantity() {
  // 将计算好的总数量渲染到页面上
  totalQuantity.textContent = list
    .filter((item) => item.select)
    .reduce((prev, item) => {
      return prev + item.number;
    }, 0);
}

// 页面打开默认显示当前的单个商品的总价
countGoodPrice();
/**
 * 计算单个商品总价格
 */
function countGoodPrice() {
  for (let i = 0; i < list.length; i++) {
    goodPrice[i].textContent = (list[i].number * list[i].price).toFixed(2);
  }
}

/* 全选和全不选 */

// 给全选框绑定事件
selectAll.onchange = handlerAllSelect;

/**
 * 全选处理
 */
function handlerAllSelect() {
  // 判断全选框是否选中
  if (selectAll.checked) {
    // 遍历
    allCheckbox.forEach((ele) => {
      // 选中全部商品复选框
      ele.checked = selectAll.checked;
    });
    list.forEach((item) => {
      // 全部选中
      item.select = true;
    });
    countPrice();
    countQuantity();
  } else {
    // 遍历
    allCheckbox.forEach((ele) => {
      // 取消选中所有的商品框
      ele.checked = selectAll.checked;
    });
    list.forEach((item) => {
      // 取消选中
      item.select = false;
    });
    // 取消全部，重置为0
    totalQuantity.textContent = 0;
    totalPrice.textContent = 0;
  }
}

// 给每个商品单选框绑定事件
allCheckbox.forEach((item) => {
  item.onchange = handlerGood;
});

/**
 * 点击单个商品复选框的处理
 */
function handlerGood() {
  for (let i = 0; i < allCheckbox.length; i++) {
    if (allCheckbox[i].checked) {
      // count++;
      list[i].select = true;
      countPrice();
      countQuantity();
    } else if (!allCheckbox[i].checked) {
      list[i].select = false;
      countPrice();
      countQuantity();
    }
  }
  if (list.every((item) => item.select)) {
    selectAll.checked = true;
  } else {
    selectAll.checked = false;
  }
}

/* 商品数量增减 */

// 给每个+按钮绑定点击事件
addBtn.forEach(function (ele) {
  ele.onclick = addNum;
});

// 遍历，将每个商品数量放入数组
list.forEach((ele) => {
  quantityArr.push(ele.number);
});

/**
 * 增加商品数量的处理
 */
function addNum() {
  // 重新获取
  allGood = document.querySelectorAll(".center>li");
  addBtn = document.querySelectorAll(".number .add");
  numberIpts = document.querySelectorAll(".number input");
  goodPrice = document.querySelectorAll(".subtotal span");
  // 获取当前点击的商品
  let currentGood = this.parentElement.parentElement;
  let currentIndex = currentGood.dataset.id;
  for (let i = 0; i < list.length; i++) {
    if (list[i].id == currentIndex) {
      if (!(numberIpts[i].value >= quantityArr[i])) {
        // 修改页面的商品数量
        numberIpts[i].value++;
        // 修改商品数组的number
        list[i].number = numberIpts[i].value - 0;
        // 计算单个商品的总价
        countGoodPrice();
      } else {
        numberIpts[i].value = quantityArr[i];
        list[i].number = quantityArr[i];
      }
    }
  }
  countQuantity();
  countPrice();
}

// 给每个+按钮绑定点击事件
reduceBtn.forEach(function (ele) {
  ele.onclick = reduceNum;
});

/**
 * 减少商品数量的处理
 */
function reduceNum() {
  // 重新获取
  allGood = document.querySelectorAll(".center>li");
  reduceBtn = document.querySelectorAll(".number .reduce");
  numberIpts = document.querySelectorAll(".number input");
  goodPrice = document.querySelectorAll(".subtotal span");
  let currentGood = this.parentElement.parentElement;
  let currentIndex = currentGood.dataset.id;

  for (let i = 0; i < list.length; i++) {
    // 判断当前点击的商品
    if (list[i].id == currentIndex) {
      if (!(numberIpts[i].value <= 0)) {
        numberIpts[i].value--;
        list[i].number = numberIpts[i].value - 0;
        countGoodPrice();
      } else {
        numberIpts[i].value = 0;
        list[i].number = 0;
      }
    }
  }
  countQuantity();
  countPrice();
}

// 给每个商品的删除按钮绑定点击事件
delBtns.forEach(function (ele) {
  ele.onclick = delOneGood;
});

/**
 * 删除单个商品
 */
function delOneGood() {
  let delGood = this.parentElement.parentElement;
  let delIndex = delGood.dataset.id;
  delGood.remove();
  // 重新获取当前页面的节点
  allCheckbox = document.querySelectorAll("ul>li .select input");
  for (let i = 0; i < list.length; i++) {
    if (list[i].id == delIndex) {
      list.splice(i, 1);
      quantityArr.splice(i, 1);
    }
  }
  countQuantity();
  countPrice();
  // 当没有商品时，禁用全选按钮
  handlerEmptycart();
}

// 给删除选中的按钮绑定点击事件
delSelectBtn.onclick = delSelectGood;

/**
 * 删除选中的商品的处理
 */
function delSelectGood() {
  allCheckbox.forEach((ele) => {
    if (ele.checked) {
      // 删除页面上选择中的商品
      ele.parentElement.parentElement.remove();
    }
  });
  // 获取所有的商品复选框
  allCheckbox = document.querySelectorAll("ul>li .select input");
  // 将商品数组select属性为true的删除
  for (let i = 0; i < list.length; i++) {
    if (list[i].select) {
      list.splice(i, 1);
      quantityArr.splice(i, 1);
      // 解决数组塌陷
      i--;
    }
  }
  // 重新计算总价格
  countQuantity();
  // 重新计算总数量
  countPrice();
  // 数组为空，禁用和取消全选按钮的选中
  handlerEmptycart();
}

/* 清空购物车 */
claerBtn.onclick = () => {
  let first = ulCenter.firstElementChild;
  while (first) {
    first.remove();
    first = ulCenter.firstElementChild;
  }
  // 将后台商品数组清空
  list.length = 0;
  // 商品数组为空，禁用全选按钮
  handlerEmptycart();
  // 重新计算总价格
  countPrice();
  // 重新计算总数量
  countQuantity();
};

/**
 *  购物车为空的处理
 */
function handlerEmptycart() {
  // 数组长度为空
  if (list.length === 0) {
    /* 文字提示 */
    let divEl = document.createElement("div");
    divEl.textContent = "啥也没有了！！！";
    divEl.classList.add("clearTxt");
    ulCenter.append(divEl);

    // 取消全选框选中
    selectAll.checked = false;
    // 禁用全选按钮
    selectAll.disabled = true;
  }
}
